---
title: Skip to Main Content
description: This component is used to allow keyboard users a quick way to skip directly to the main content instead of needing to tab through all navigation items.
docType: Demo
docGroup: Components
group: Utils
components: [SkipToMainContent]
---

# Skip to Main Content

This component is used to allow keyboard users a quick way to skip directly to
the main content instead of needing to tab through all navigation items.

> !Warn! This component should not be used if using the `LayoutAppBar` component
> since it is already built-in.

## Simple Example

The default behavior for the `SkipToMainContent` component will be to only be
visible to screen readers or once keyboard focused. The user can then press the
`Enter` key to focus the `<main>` element.

Try tabbing into the example below to see the default styles.

```demo source="./SimpleSkipToMainContentExample.tsx"

```

### Custom Focus Target

The `SkipToMainContent` can also be used within complex
[Dialogs](/components/dialogs) to skip to the main content by providing the
`mainId` prop pointing to the `id` of an element to focus.

> !Warn! The target element must either be a focusable element or have
> `tabIndex={-1}` to show it can be programmatically focused. The element might
> also need custom focus styles to override the default browser behavior.

```demo source="./CustomFocusTargetExample.tsx"

```

### Custom Link Styles

The default styles can be configured by changing the
[$SASSDOC](link-skip-to-main-z-index), [$SASSDOC](link-skip-to-main-styles),
and [$SASSDOC](link-skip-to-main-active-styles) Sass variables which would be
applied globally. If custom styles are required for a single component, enable
the `unstyled` prop to use the default link focus styles instead of the updated
color and outline styles. This might make it easier to enable custom focus
styles.

```demo source="./CustomLinkStylesExample.tsx"

```
